﻿<!DOCTYPE html>
<!-- saved from url=(0080)http://daily.yuantutech.com/tms/terminal/product.html?tdsourcetag=s_pctim_aiomsg -->
<html lang="en" style="font-size: 379.444px;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="spm-id" content="100.1526">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script src="https://cdn.bootcss.com/js-sha1/0.6.0/sha1.min.js"></script>
    <!--<script src="https://cdn.bootcss.com/jQuery-JSONP/2.4.0/jquery.jsonp.min.js"></script>-->
    <title>商品页</title>
    <script type="text/javascript">

        (function (doc, win) {
            var docEl = doc.documentElement;
            var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            var recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if (clientWidth >= 740 && clientWidth <= 1000) {
                    clientWidth = 1000;
                }
                if (clientWidth > 640 && clientWidth <= 740) {
                    clientWidth = 740
                }
                if (clientWidth <= 640 && clientWidth > 480) {
                    clientWidth = 640;
                }
                if (clientWidth <= 480 && clientWidth > 375) {
                    clientWidth = 480
                }
                if (clientWidth <= 375 && clientWidth > 360) {
                    clientWidth = 375
                }
                if (clientWidth <= 360) {
                    clientWidth = 360
                }
                docEl.style.fontSize = 100 * (clientWidth / 360) + 'px';
            }
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
    <style>

        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
            line-height: 1;
        }

        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        code,
        form,
        fieldset,
        legend,
        input,
        textarea,
        p,
        blockquote,
        th,
        td,
        header,
        hgroup,
        nav,
        section,
        article,
        aside,
        footer,
        figure,
        figcaption,
        menu,
        button {
            margin: 0;
            padding: 0;
        }

        button {
            border: none;
            outline: none;
        }

        .wrapper {
            position: relative;
            height: 100%;
            width: 100%;
            font-size: 0.2rem;
            background-color: #C0C7E3;
        }

        .header {
            position: relative;
            width: 100%;
            height: 0.6rem;
            background: linear-gradient(270deg, rgba(178, 183, 222, 1) 0%, rgba(212, 216, 240, 1) 100%);
            box-shadow: 0px 0.01rem 0.05rem 0px rgba(164, 173, 204, 1);
            display: flex;
        }

        .scaleSmallBig {
            /* animation: scaleChange 0.3s; */
            transform: scale(0.8)
        }

        .alert {
            background-color: rgb(0, 0, 0, 0.2);
            height: 0.4rem;
            width: 50%;
            padding: 0 .15rem;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            color: #fff;
            border-radius: 0.1rem;
            font-size: 0.16rem;
            text-align: center;
            line-height: 0.4rem;
        }


        @keyframes scaleChange {
            0% {
                transform: scale(1.0)
            }

            50% {
                transform: scale(0.8)
            }

            100% {
                transform: scale(1.0)
            }
        }

        .header > div:nth-child(1) {
            width: 30%;
            text-align: center;
            margin: auto;
        }

        .header > div:nth-child(2) {
            width: 40%;
            text-align: center;
            margin: auto;
        }

        .header > div:nth-child(3) {
            width: 30%;
            text-align: center;
            margin: auto;
        }

        .header .hd-left .hd-left-btn {
            width: 0.67rem;
            height: 0.26rem;
            /* line-height: 0.6rem; */
            padding-left: 0.08rem;
            color: #ffffff;
        }

            .header .hd-left .hd-left-btn img {
                width: 100%;
            }

        .header .hd-center > div:nth-child(1) {
            font-family: PingFangSC-Medium;
            letter-spacing: 1px;
            margin-bottom: 0.06rem;
        }

        .header .hd-center > div:nth-child(2) {
            font-size: 0.13rem;
            color: #7D87CB;
        }

        .header .hd-right > div:nth-child(2) {
            font-size: 0.06rem;
            font-family: PingFangSC-Medium;
            color: #515151;
        }

        .header .hd-right > div:nth-child(1) {
            height: 0.42rem;
        }

            .header .hd-right > div:nth-child(1) > img {
                width: 0.4rem;
            }

        .header .right-top {
            position: absolute;
            right: 0.06rem;
            font-size: 0.01rem;
            top: 0.02rem;
        }

        .center {
            background-color: #fff;
            height: 5.4rem;
            margin: 0.05rem 0.08rem;
            border-radius: 0.04rem;
            box-shadow: 0px 0.03rem 0.06rem 0px rgba(152, 161, 193, 0.7)
        }

            .center .center-header {
                color: #7C7C7C;
                height: 0.32rem;
                border-bottom: 1px solid #eee;
                background-image: url('https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/861bc8d2a3b7a68ef86c8abc1dbc3bbe-572-80.png');
                background-size: 30%;
                background-repeat: no-repeat;
                background-position: center;
            }

                .center .center-header > div {
                    float: right;
                    text-align: right;
                    font-size: 0.09rem;
                    padding-right: 0.16rem;
                    padding-top: 0.03rem;
                }

                    .center .center-header > div > p {
                        line-height: 0.13rem;
                    }

            .center .center-content {
                display: flex;
                flex-wrap: wrap;
                height: 4.68rem;
                overflow: hidden;
                /* overflow-y: scroll; */
            }

                .center .center-content .prd-item {
                    position: relative;
                    box-sizing: border-box;
                    width: 25%;
                    /* width: calc(25% - 1px); */
                    text-align: center;
                    height: 1.17rem;
                    padding: 0 0.03rem;
                    padding-top: 0.1rem;
                    padding-bottom: 0.04rem;
                    border-right: 1px solid #eee;
                    border-bottom: 1px solid #eee;
                }

        .time-sale {
            position: absolute;
            right: 0.02rem;
            top: 0;
        }

            .time-sale img {
                width: 0.28rem;
            }

        .sale-out {
            position: absolute;
            right: 0.07rem;
            bottom: 0.4rem;
        }

            .sale-out img {
                width: 0.42rem;
            }

        .img {
            width: 0.67rem;
            height: 0.67rem;
        }

        .title {
            color: #515151;
            font-size: 0.09rem;
            padding-top: 0.03rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
        }

        .price {
            position: relative;
            background-color: #037AFF;
            border-radius: 0.07rem;
            padding: 0 0.06rem 0 0.05rem;
            color: #ffffff;
            font-size: 0.1rem;
            line-height: 0.13rem;
            /* width: 0.3rem; */
            text-align: center;
            margin: auto;
        }

            .price > i {
                color: #FFCF03;
                font-size: 0.16rem;
                line-height: 0.0rem;
                font-family: PingFangSC-Medium;
                font-weight: 600;
                padding-left: 0.01rem;
            }

        .slant {
            height: 0.01rem;
            width: 0.20rem;
            background-color: #fff;
            position: absolute;
            top: 0.06rem;
            transform: rotate(-35deg);
            left: 0.09rem;
        }

        .center-content .not-opened {
            color: #515151;
            text-align: center;
            margin: auto;
            margin-top: 0.83rem;
        }

            .center-content .not-opened > img {
                width: 0.6rem;
                padding-bottom: 0.4rem;
            }

            .center-content .not-opened > p {
                font-size: 0.15rem;
                line-height: 0.22rem;
            }

        .center .center-footer {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 0.4rem;
        }

            .center .center-footer .previous {
                padding-right: 0.17rem;
            }

                .center .center-footer .previous > img {
                    /* width: 0.52rem; */
                    height: 0.23rem;
                }

            .center .center-footer .next > img {
                /* width: 0.52rem; */
                height: 0.23rem;
            }

            .center .center-footer .next {
                padding-left: 0.17rem;
            }

            .center .center-footer .pages {
                height: 0.35rem;
            }

                .center .center-footer .pages .active {
                    background-color: #037AFF;
                }

                .center .center-footer .pages > span {
                    display: inline-block;
                    height: 0.06rem;
                    width: 0.06rem;
                    margin: 0.05rem;
                    border-radius: 50%;
                    background-color: #D8D8D8;
                    vertical-align: -webkit-baseline-middle;
                }

        .footer {
            padding-top: 0.06rem;
            text-align: center;
        }

            .footer > img {
                height: 0.12rem;
                padding-right: 0.08rem;
            }

        .mask,
        .mask-failure,
        .mask-success,
        .mask-success-sale,
        .mask-failure-sale {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgb(0, 0, 0, 0.4);
            top: 0;
        }

            .mask .mask-content,
            .failure-content,
            .success-content,
            .success-sale-content,
            .failure-content-sale {
                margin: 0 auto;
                margin-top: 1.9rem;
                height: 2.6rem;
                width: 2.5rem;
                background-color: #fff;
                border-radius: 0.04rem;
            }

                .mask .mask-content .mask-top {
                    font-size: 0.11rem;
                    font-weight: 200;
                    color: #A5A5A5;
                    text-align: right;
                    padding-top: 0.06rem;
                    padding-right: 0.08rem;
                    padding-bottom: 0.15rem;
                }

                .mask .mask-content .mask-center {
                    display: flex;
                    /* justify-content: center; */
                    align-items: stretch;
                }

                    .mask .mask-content .mask-center .mask-left {
                        color: #515151;
                        font-size: 0.13rem;
                        width: 50%;
                        text-align: center;
                    }

                        .mask .mask-content .mask-center .mask-left > p {
                            text-align: center;
                            line-height: 0.18rem;
                            height: 0.4rem;
                            padding: 0 0.1rem;
                        }

                        .mask .mask-content .mask-center .mask-left > div {
                            padding-bottom: 0.37rem;
                            text-align: center;
                        }

                    .mask .mask-content .mask-center .mask-right {
                        color: #515151;
                        font-size: 0.13rem;
                        text-align: center;
                    }

                        .mask .mask-content .mask-center .mask-right > p {
                            line-height: 0.18rem;
                        }

                        .mask .mask-content .mask-center .mask-right .mask-price {
                            color: #FF6633;
                            font-size: 0.17rem;
                            line-height: 0.23rem;
                            padding-bottom: 0.04rem;
                        }

                        .mask .mask-content .mask-center .mask-right .mask-info {
                            font-size: 0.1rem;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }

                            .mask .mask-content .mask-center .mask-right .mask-info > div {
                                vertical-align: middle;
                            }

                                .mask .mask-content .mask-center .mask-right .mask-info > div:nth-child(1) {
                                    width: 0.15rem;
                                    height: 0.13rem;
                                    background-image: url("https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/11920ecb21dc578e99e0aefef1670827-44-44.png");
                                    background-repeat: no-repeat;
                                    background-size: 100%;
                                    background-position: center center;
                                }

                                .mask .mask-content .mask-center .mask-right .mask-info > div:nth-child(3) {
                                    width: 0.15rem;
                                    height: 0.13rem;
                                    background-image: url("https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/2b53a601a822506219763bd7c1b1844a-45-44.png");
                                    background-repeat: no-repeat;
                                    background-size: 100%;
                                    background-position: center center;
                                }

                        .mask .mask-content .mask-center .mask-right #qrCode {
                            width: 0.94rem;
                            height: 0.94rem;
                            padding-bottom: 0.02rem;
                        }

                    .mask .mask-content .mask-center .mask-left > div > img {
                        width: 1rem;
                        height: 1rem;
                    }

                .mask .mask-content .mask-bottom {
                    text-align: center;
                }

                    .mask .mask-content .mask-bottom > img {
                        box-shadow: 0px 0.14rem 0.3rem -0.12rem rgba(193, 123, 36, 1);
                    }

                    .mask .mask-content .mask-bottom > img {
                        width: 0.96rem;
                    }

            .mask-failure .failure-content {
                text-align: center;
                color: #515151;
            }

                .mask-failure .failure-content .failure-top {
                    font-size: 0.13rem;
                    padding-top: 0.07rem;
                    padding-bottom: 0.26rem;
                }

                .mask-failure .failure-content .failure-center > img {
                    width: 0.9rem;
                }

                .mask-failure .failure-content .failure-center > div:nth-child(2) {
                    font-size: 0.2rem;
                    line-height: 0.32rem;
                }

                .mask-failure .failure-content .failure-center > div:nth-child(3) {
                    font-size: 0.13rem;
                    line-height: 0.17rem;
                }

                .mask-failure .failure-content .failure-bottom {
                    padding-top: 0.18rem;
                    text-align: center;
                }

                    .mask-failure .failure-content .failure-bottom .repay {
                        margin-right: 0.18rem;
                    }

                    .mask-failure .failure-content .failure-bottom > img {
                        width: 0.92rem;
                        box-shadow: 0px 0.14rem 0.3rem -0.12rem rgba(193, 123, 36, 1);
                    }

        .success-content {
            height: 2.45rem;
            text-align: center;
        }

            .success-content > img {
                width: 0.9rem;
                padding-top: 0.5rem;
            }

            .success-content > p {
                color: #515151;
                font-size: 0.2rem;
                line-height: 0.3rem;
            }

            .success-content > span {
                color: #515151;
                font-size: 0.13rem;
                line-height: 0.18rem;
            }

        .success-sale-content {
            height: 3.45rem;
            margin-top: 1.5rem;
            text-align: center;
            color: #515151;
        }

            .success-sale-content .sale-success {
                height: 2.56rem;
            }

                .success-sale-content .sale-success > img:first-child {
                    width: 0.65rem;
                    padding-top: 0.5rem;
                }

                .success-sale-content .sale-success > img:last-child {
                    width: 1rem;
                    box-shadow: 0px 0.14rem 0.3rem -0.12rem rgba(193, 123, 36, 1);
                }

                .success-sale-content .sale-success > p:nth-child(2) {
                    font-size: 0.2rem;
                    line-height: 0.35rem;
                }

                .success-sale-content .sale-success > p:nth-child(3) {
                    font-size: 0.13rem;
                    line-height: 0.18rem;
                }

                .success-sale-content .sale-success > p:nth-child(4) {
                    font-size: 0.13rem;
                    line-height: 0.18rem;
                    padding-bottom: 0.08rem;
                }

            .success-sale-content .apply-service {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 0.9rem;
                background: rgba(233, 233, 233, 1);
                box-shadow: 0px 0.02rem 0.03rem 0px rgba(187, 187, 187, 0.5);
                border-radius: 0px 0px 0.04rem 0.04rem;
            }

                .success-sale-content .apply-service .apply-info > div > img {
                    width: 0.45rem;
                }

                .success-sale-content .apply-service .apply-info > div:nth-child(2) {
                    font-size: 0.1rem;
                }

                .success-sale-content .apply-service .apply-tip {
                    font-size: 0.12rem;
                    line-height: 0.17rem;
                    padding-left: 0.26rem;
                    text-align: left;
                }

        .failure-content-sale {
            text-align: center;
            color: #515151;
        }

            .failure-content-sale > img:first-child {
                width: 0.9rem;
                padding-top: 0.1rem;
            }

            .failure-content-sale > img:last-child {
                width: 1rem;
                padding-top: 0.2rem;
                box-shadow: 0px 0.1rem 0.3rem -0.12rem rgba(193, 123, 36, 1);
            }

            .failure-content-sale > div {
                line-height: 0.18rem;
                font-size: 0.13rem;
                font-weight: 200;
            }

            .failure-content-sale > p {
                line-height: 0.3rem;
                font-size: 0.2rem;
            }
    </style>
    <meta name="spm-id" content="2010.2">
    <style type="text/css">
        html, * {
            -moz-user-select: text !important;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <div class="hd-left">
                <div class="hd-left-btn" onclick="javascript:alert('返回（隐藏）');BoundObject.CloseFlag('1');">
                    <img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/92bb4e2a85143aaf9dc4664289b70b85-340-134.png" class="scaleSmallBig">
                </div>
                <div class="hd-left-btn" onclick="javascript:alert('关闭');BoundObject.CloseFlag('2');">
                    <img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/4e03e556364f655aecab67b7cf5bbd92-288-105.png" class="scaleSmallBig">
                </div>
            </div>
            <div class="hd-center">
                <div>医疗 | 零售</div>
                <div>多功能自助服务终端</div>
            </div>
            <div class="hd-right">
                <div>
                    <img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/3d392f29905c16c884eb9c9b80707f41-282-282.png">
                </div>
                <div>慧医健康 优惠多多</div>
            </div>
            <div class="right-top"><b>1</b> 秒</div>
        </div>
        <div class="center">
            <div class="center-header">
                <div>
                    <p>客服热线</p>
                    <p>0571-89916777</p>
                </div>
            </div>
            <div class="center-content">
                <!-- <div class="prd-item">
                    <img class="img" src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/9662e92e2dd6b73d754ae647495ab7b0-200-200.png" />
                    <p class="title">雪碧</p>
                    <button class="price">¥ 3.5<i>1.5</i>
                        <div class="slant"></div>
                    </button>
                    <div class="time-sale"><img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/6cafa0ae5cb7f6c28726f455d33b2c99-166-116.png" /></div>
                </div>
                <div class="prd-item">
                    <img class="img" src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/4d619b56cdcb9bc5617a03ee9ba6a7b6-600-600.png" />
                    <p class="title">雪碧</p>
                    <button class="price">¥ 3.5</button>
                    <div class="sale-out"><img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/58d48d17470304982584a3c6195b4c08-256-256.png" /></div>
                </div>
                <div class="prd-item">
                    <img class="img" src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/4d619b56cdcb9bc5617a03ee9ba6a7b6-600-600.png" />
                    <p class="title">雪碧</p>
                    <button class="price">¥ 3.5</button>
                </div> -->
                <div class="not-opened" style="display: none;">
                    <img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/7a29c5bef9455adeef85e41fdb3407cd-180-180.png">
                    <p>零售功能暂时无法使用 </p>
                    <p>敬请期待</p>
                </div>
            </div>
            <div class="center-footer">
                <div class="previous"><img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/7db027be717182bcf1cff1094cb4fc9e-156-68.png"></div>
                <div class="pages">
                </div>
                <div class="next"><img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/8f0c23d885a5af3d946f4790b1ed0097-156-68.png"></div>
            </div>
        </div>
        <div class="footer">
            <img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/14e4c2e59d11fe80fe485ffeca0263b8-158-35.png">
            <img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/399e47ad39997c566290b562f16a7336-341-40.png">
        </div>
        <div class="mask" style="display:none">
            <div class="mask-content">
                <div class="mask-top"><b>60</b> 秒后自动退出</div>
                <div class="mask-center">
                    <div class="mask-left">
                        <p></p>
                        <div><img src="http://daily.yuantutech.com/tms/terminal/product.html?tdsourcetag=s_pctim_aiomsg"></div>
                    </div>
                    <div class="mask-right">
                        <p>请扫码支付</p>
                        <p class="mask-price"></p>
                        <div id="qrCode"></div>
                        <!-- <img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/3d392f29905c16c884eb9c9b80707f41-282-282.png" /> -->
                        <div class="mask-info">
                            <div></div>
                            <div>微信</div>
                            <div></div>
                            <div>支付宝</div>
                        </div>
                    </div>
                </div>
                <div class="mask-bottom">
                    <img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/4e03e556364f655aecab67b7cf5bbd92-288-105.png">
                </div>
            </div>
        </div>
        <div class="mask-failure" style="display:none">
            <div class="failure-content">
                <div class="failure-top">10 秒后自动退出</div>
                <div class="failure-center">
                    <img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/4425ce7df1864ec754e1f3f236dc17ee-270-270.png">
                    <div>支付失败</div>
                    <div>请重新支付</div>
                </div>
                <div class="failure-bottom">
                    <img class="repay" src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/fd1bd9047448470b9f48964949bad465-286-103.png">
                    <img class="cancel" src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/4e03e556364f655aecab67b7cf5bbd92-288-105.png">
                </div>
            </div>
        </div>
        <div class="mask-success" style="display:none">
            <div class="success-content">
                <img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/e4b3fb9b6e66aeb7b5861e55ff91221e-270-270.png">
                <p>支付成功</p>
                <span>正在出货…</span>
            </div>
        </div>
        <div class="mask-success-sale" style="display:none">
            <div class="success-sale-content">
                <div class="sale-success">
                    <img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/c0e036ceac2e228d9b9d11ad3b400fca-195-179.png">
                    <p>出货成功</p>
                    <p>请在机器下方出货口 </p>
                    <p>取走您的商品</p>
                    <img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/4e03e556364f655aecab67b7cf5bbd92-288-105.png">
                </div>
                <div class="apply-service">
                    <div class="apply-info">
                        <div>
                            <img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/658a2f54d137805d81a744098eb75e6f-141-141.png">
                        </div>
                        <div>慧医健康</div>
                    </div>
                    <div class="apply-tip">
                        <p> 关注慧医健康微信公众号</p>
                        <p> 享更多商品和健康</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="mask-failure-sale" style="display:none">
            <div class="failure-content-sale">
                <img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/4425ce7df1864ec754e1f3f236dc17ee-270-270.png">
                <p>出货失败</p>
                <div>您的支付金额，将原路返回 </div>
                <div>若 5 分钟内未收到退款</div>
                <div> 请拨打客服电话 0571-89916777</div>
                <img class="cancel" src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/4e03e556364f655aecab67b7cf5bbd92-288-105.png">
            </div>
        </div>
        <div class="alert" style="display:none"></div>
    </div>
    <script>

        function qcodetochar(str) {
            var out, i, len, c;
            out = "";
            len = str.length;
            for (i = 0; i < len; i++) {
                c = str.charCodeAt(i);
                if ((c >= 0x0001) && (c <= 0x007F)) {
                    out += str.charAt(i);
                } else if (c > 0x07FF) {
                    out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                    out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                } else {
                    out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                }
            }
            return out;
        };

        $.fn.qcode = function (options) {
            if (options) {
                var opt = {};
                if (typeof options == 'string') {
                    opt.text = options;
                } else {
                    if (options.text) opt.text = options.text;
                    if (options.type && options.type == 'ch') opt.text = qcodetochar(opt.text);
                    if (options.render && options.render == 'table') opt.render = options.render;
                    if (options.width) opt.width = options.width;
                    if (options.height) opt.height = options.height;
                }
                $(this).qrcode(opt);
            }
        };

        (function () {
            var screenWidth = document.documentElement.clientWidth;
            this.qrCodeW = screenWidth * 94 / 360;
            this.paegSize = 16;
            this.pageTotal = 0;
            this.productInfo = [];
            this.goodsID = '';
            this.payTimer = null;
            this.checkDealTimer = null;
            this.backIndextimer = null;
            this.imgTimer = null;
            this.times = 60;
            this.dealTimes = 100;
            this.backIndexTimes = 90;
            this.imgWHArr = [];
            var self = this;
            var mask = false;
            var t_img = null;
            var isLoad = true;
            var pageIndex = 0;
            var imgdefereds = [];
            var nextImgT = "https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/8f0c23d885a5af3d946f4790b1ed0097-156-68.png";
            var nextImgF = "https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/1bc753e9dbb436372ba9d88a18629f53-156-68.png";
            var previousImgT = "https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/238618a4d1da64ea44669eaf8e256ca6-156-68.png";
            var previousImgF = "https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/7db027be717182bcf1cff1094cb4fc9e-156-68.png";
            // var sale_api = "http://10.10.11.181:8080/zzfm/api/disPatch";
            var sale_api = "http://localhost:8080/zzfm/api/disPatch";
            initMask();
            initBack();
            getSDKStatus();
            function initMask() {
                // $('.alert').hide();
                // $('.mask').hide();
                // $('.mask-failure').hide();
                // $('.mask-success').hide();
                // $('.mask-success-sale').hide();
                // $('.mask-failure-sale').hide();
                $('.not-opened').hide();
                $('.mask-top').find('b').text(self.times);
            }

            function initBack() {
                self.backIndextimer && clearInterval(self.backIndextimer);
                self.backIndextimer = setInterval(function () {
                    self.backIndexTimes--;
                    if (self.backIndexTimes <= 0) {
                        clearInterval(self.backIndextimer);
                        BoundObject.CloseFlag('1');
                    }
                    $('.right-top').find('b').text(self.backIndexTimes);
                }, 1000)
            }

            function stopInit() {
                $('.center-content').children().filter('.prd-item').remove();
                $('.center-header').css({
                    'background-image': "none",
                    'border-bottom': "none",
                });
                $('.not-opened').show();
                $('.center-footer').hide();
            }

            function init() {
                // getMachineinfo();
                getGoodsInfo();
            }

            function getMachineinfo() {
                $.ajax({
                    url: sale_api,
                    dataType: "jsonp",
                    data: {
                        method: "getMachineinfo",
                    },
                    success: function (res) {
                        console.log(res)
                    }
                })
            }
            // init();
            function machineStop() {
                $.ajax({
                    url: sale_api,
                    dataType: "jsonp",
                    data: {
                        method: "isStopVend",
                    },
                    success: function (res) {
                        if (res.data.code == 0) {
                            init();
                        } else {
                            stopInit();
                        }
                    }
                })
            }

            function initPage(pageTotal) {
                $('.pages').empty();
                var _pageHtml;
                for (var i = 0; i < pageTotal; i++) {
                    if (i == 0) { _pageHtml = '<span class="active"></span>'; } else _pageHtml += '<span></span>';
                }
                $('.pages').append(_pageHtml);
                if (pageTotal <= 1) $('.next img').attr('src', nextImgF);
            }

            function productInit() {
                $('.center-content').empty();
                var _productHtml = '';
                var _slantHtml = '';
                var _saleOutHtml = '<div class="sale-out"><img src="https://front-images.oss-cn-hangzhou.aliyuncs.com/i4/58d48d17470304982584a3c6195b4c08-256-256.png" /></div>';
                var infoBypage = self.productInfo.slice(pageIndex * self.paegSize, self.paegSize * (pageIndex + 1));
                $.each(infoBypage, function (index, item) {
                    _productHtml = '<div class="prd-item">' +
                        '<img class="img" src=' + item.goodsPic + '></img>' +
                        '<p class="title">' + item.name + '</p>' +
                        '<button class="price">¥ ' + item.price / 100 + '</button>' +
                        '</div>';
                    $('.center-content').append(_productHtml);
                    if (item.stock <= 0) $('.prd-item').eq(index).append(_saleOutHtml);
                    if (item.price > item.disprice) {
                        _slantHtml = '<i>' + item.disprice / 100 + '</i><div class="slant"></div>';
                        $('.price').eq(index).append(_slantHtml);
                    }
                })
                if (self.pageTotal - 1 == pageIndex) {
                    var remainder = self.productInfo.length % 16;
                    var len = 4 - Math.ceil(remainder / 4);
                    var _blankHtml = '<div class="blank"></div>';
                    $('.center-content').append(_blankHtml);
                    $('.blank').css({
                        width: "100%",
                        height: len * 1.17 + "rem"
                    })
                }
                getImageWH();
                clickProdInit(infoBypage);
            }

            function imgLoad() {
                var $imgs = $('.prd-item').find('img');
                $imgs.each(function (ind, item) {
                    var w = item.naturalWidth;
                    var h = item.naturalHeight;
                    if (w < h) {
                        item.style.width = (0.67 * w / h).toFixed(3) + "rem";
                    }
                });
            }

            function getImageWH() {
                var $imgs = $('.prd-item').find('img');
                // console.log($imgs[0].naturalWidth);
                var w = $imgs[0].naturalWidth;
                if (typeof (w) == "undefined") {
                    console.log("undefined")
                    return;
                }
                //三种图片加载方式,第一种最耗时，加载效果最差；第三种次之，第二种最好
                // $(window).on('load',function(){
                //     console.log("加载完成")
                //     imgLoad();
                // })

                $imgs.each(function (ind, item) {
                    if (item.naturalWidth) {
                        var w = item.naturalWidth;
                        var h = item.naturalHeight;
                        var obj = { w, h }
                        self.imgWHArr.push(obj);
                        if (w < h) {
                            item.style.width = (0.67 * w / h).toFixed(3) + "rem";
                        }
                    } else {
                        t_img = setTimeout(function () {
                            getImageWH(); // 递归扫描
                        }, 2500);
                    }
                })

                // $imgs.each(function(ind,item){
                //     var dfd = $.Deferred();
                //     $(this).bind('load',function(){
                //         dfd.resolve().done(function(){
                //             setImgWH(item);
                //         });
                //     }).bind('error',function(){
                //         //图片加载错误，加入错误处理
                //         // dfd.resolve();
                //     })
                //     console.log(self.complete)
                //     // if(self.complete) setTimeout(function(){
                //     //     dfd.resolve();
                //     // },1000);
                //     // imgdefereds.push(dfd);
                // })
                // $.when.apply(null,imgdefereds).done(function(){
                //     imgLoad();
                // });
            }

            function setImgWH(item) {
                if (item.naturalWidth) {
                    var w = item.naturalWidth;
                    var h = item.naturalHeight;
                    if (w < h) {
                        item.style.width = (0.67 * w / h).toFixed(3) + "rem";
                    }
                }
            }

            function getImgW(index) {
                var o = self.imgWHArr[index];
                var w = o.w;
                var h = o.h;
                if (w < h) {
                    return (w / h).toFixed(3) + "rem";
                }
                return "1rem";
            }

            function clickProdInit(infoBypage) {
                $('.prd-item').each(function (ind, item) {
                    var stock = infoBypage[ind].stock;
                    var goodsID = infoBypage[ind].goodsId;
                    var disprice = infoBypage[ind].disprice;
                    var price = infoBypage[ind].price;
                    var text = infoBypage[ind].name;
                    var img = infoBypage[ind].goodsPic;
                    var finalPrice = disprice > price ? price / 100 : disprice / 100;
                    $(this).click(function (e) {
                        if (stock <= 0) {
                            $('.alert').text("已售罄").show();
                            setTimeout(() => {
                                $('.alert').hide();
                            }, 1500);
                            return false;
                        }
                        self.goodsID = goodsID;
                        $('.mask').show();
                        $('.mask-left p').text(text);
                        var $curImg = $('.mask-left').find('img');
                        $curImg.attr('src', img);
                        $curImg[0].style.width = getImgW(ind);
                        $('.mask-price').text('¥' + finalPrice);
                        $.ajax({
                            url: sale_api,
                            dataType: "jsonp",
                            data: {
                                method: "selectGoods",
                                goodsID: goodsID
                            },
                            success: function (res) {
                                if (res.success) {
                                    getQrcode();
                                }
                            }
                        })

                    })
                })
            }

            function getQrcode() {
                $.ajax({
                    url: sale_api,
                    dataType: "jsonp",
                    data: {
                        method: "getPayQRCode",
                    },
                    success: function (res) {
                        $("#qrCode").empty();
                        var qrCode = res.data.qrCode;
                        var opt = { text: qrCode, width: self.qrCodeW, height: self.qrCodeW }
                        $("#qrCode").qcode(opt);
                        if (res.success) {
                            $('.mask').show();
                            payInterval();
                        }
                    }
                })
            }

            function closeMask() {
                // console.log(self.times);
                self.times = 60;
                self.payTimer && clearInterval(self.payTimer);
                self.payTimer = null;
                self.dealTimes = 100;
                self.checkDealTimer && clearInterval(self.checkDealTimer);
                self.checkDealTimer = null;
                $('.mask').hide();
            }

            function cancelSelectGoods() {
                closeMask();
                $.ajax({
                    url: sale_api,
                    dataType: "jsonp",
                    data: {
                        method: "cancelSelectGoods",
                        goodsID: self.goodsID
                    },
                    success: function (res) {
                        if (res.success) { getGoodsInfo(); }
                    }
                })
            }

            function payInterval() {
                self.payTimer && clearInterval(self.payTimer);
                self.payTimer = setInterval(function () {
                    self.times--;
                    if (self.times < 0) {
                        cancelSelectGoods();
                        return;
                    }
                    getDealState();
                    $('.mask-top').find('b').text(self.times);
                }, 1000)
            }

            function getDealState() {
                console.log("getDealState");
                self.checkDealTimer && clearInterval(self.checkDealTimer);
                self.checkDealTimer = setInterval(function () {
                    console.log(self.dealTimes);
                    self.dealTimes--;
                    if (self.dealTimes < 0) { console.log("您的支付超时"); return; }
                    $.ajax({
                        url: sale_api,
                        dataType: "jsonp",
                        data: {
                            method: "getDealState",
                        },
                        success: function (res) {
                            console.log("123")
                            if (res.success) {
                                switch (res.code) {
                                    case 3:
                                        console.log(3);
                                        closeMask();
                                        $('.mask-success').show();
                                        break;
                                    case 4:
                                        console.log(4);
                                        closeMask();
                                        $('.mask-success').hide();
                                        $('.mask-success-sale').show();
                                        break;
                                    case 5:
                                        console.log(5);
                                        closeMask();
                                        $('.mask-success').hide();
                                        $('.mask-failure-sale').show();
                                        break;
                                    default: break;
                                }
                            }
                        },
                        error: function (err) {
                            console.log(err)
                        }
                    })
                }, 1000)

            }

            // $.jsonp({
            // url: sale_api+"?method=getSDKState",
            // data:{rel:13},
            // callbackParameter:"callback",
            // timeout:3000,
            // dataFilter:function(json) {
            //     console.log("jsonp.filter:" + json.name);
            //     json.name = "测试123435";
            //     return json;
            // },
            // success:function(json,textStatus,xOptions){
            //     console.log("jsonp.success:"+json.name);
            // },
            // error:function(xOptions,textStatus){
            //     console.log("jsonp.error:"+textStatus+", rel="+xOptions.data.rel);
            // }
            // });

            function getSDKStatus() {
                $.ajax({
                    url: sale_api,
                    dataType: "jsonp",
                    data: {
                        method: "getSDKState"
                    },
                    success: function (res) {
                        console.log(res);
                        if (res.success && res.data.code == 0) {
                            machineStop();
                        }
                    }

                })
            }

            function getGoodsInfo() {
                // var self = this;
                // var mock = { "success": true, "resultCode": "100", "msg": "成功", "data": [{ "goodsId": 8731, "name": "无忧卡套", "price": 2800.0, "disprice": 2800.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/e06ea809-246b-442b-86fd-668c10b0e2bc.jpg", "stock": 0 }, { "goodsId": 8732, "name": "和合卡套", "price": 2800.0, "disprice": 2000.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/171e9a55-3dad-4b5a-8a1a-86e33b005817.jpg", "stock": 10 }, { "goodsId": 49449, "name": "瑞犬送福纪念金币", "price": 2900.0, "disprice": 2900.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-07/47ff92c2-be87-43dc-97f5-7bf9eada5a54.jpg", "stock": 0 }, { "goodsId": 49450, "name": "瑞犬送福纪念银币", "price": 1900.0, "disprice": 1900.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-07/bab8bf1b-b2e7-4d19-a0ab-c48f3a02ac52.jpg", "stock": 10 }, { "goodsId": 52979, "name": "上上签·平安", "price": 2500.0, "disprice": 2500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/9630f3ea-41fd-4b09-973b-4e71ade253be.jpg", "stock": 0 }, { "goodsId": 8731, "name": "无忧卡套", "price": 2800.0, "disprice": 2800.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/e06ea809-246b-442b-86fd-668c10b0e2bc.jpg", "stock": 10 }, { "goodsId": 8732, "name": "和合卡套", "price": 2800.0, "disprice": 2800.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/171e9a55-3dad-4b5a-8a1a-86e33b005817.jpg", "stock": 10 }, { "goodsId": 49449, "name": "瑞犬送福纪念金币", "price": 2900.0, "disprice": 2900.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-07/47ff92c2-be87-43dc-97f5-7bf9eada5a54.jpg", "stock": 10 }, { "goodsId": 49450, "name": "瑞犬送福纪念银币", "price": 1900.0, "disprice": 1900.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-07/bab8bf1b-b2e7-4d19-a0ab-c48f3a02ac52.jpg", "stock": 10 }, { "goodsId": 52980, "name": "上上签·健康", "price": 2500.0, "disprice": 2500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/ca870b7d-528d-4285-bae3-293e89c914bd.jpg", "stock": 10 }, { "goodsId": 52981, "name": "上上签·财运", "price": 2500.0, "disprice": 2500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/e6ed9a44-c54c-4cc0-a632-e8ee1a755965.jpg", "stock": 10 }, { "goodsId": 52982, "name": "上上签·姻缘", "price": 2500.0, "disprice": 2500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/2d600ffa-8679-4b2f-91e2-3f5c473b9580.jpg", "stock": 10 }, { "goodsId": 52983, "name": "上上签·自在", "price": 2500.0, "disprice": 2500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/0a9c6763-b807-4e3e-9c8c-c84b1718e801.jpg", "stock": 10 }, { "goodsId": 53002, "name": "迷你闹钟·状元*黄", "price": 2500.0, "disprice": 2500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/36205234-2188-42c4-afc6-113b37ba6c6a.jpg", "stock": 10 }, { "goodsId": 53003, "name": "迷你闹钟·状元*红", "price": 2500.0, "disprice": 2500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-15/01c8fee5-c26b-4deb-9cad-fe06d2eb123d.jpg", "stock": 9 }, { "goodsId": 53004, "name": "迷你闹钟·状元*蓝", "price": 2500.0, "disprice": 2500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/92dbe5b6-e82c-4ee4-9ad5-18b693718493.jpg", "stock": 0 }, { "goodsId": 53005, "name": "迷你闹钟·状元*绿", "price": 2500.0, "disprice": 2500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/0c12f72c-f12c-4fed-b3bf-34c4c9db9aee.jpg", "stock": 10 }, { "goodsId": 53325, "name": "锦缎祈福挂饰*红", "price": 3500.0, "disprice": 3500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/b07bfcae-7a78-4ae3-9758-beedc46fd2e3.jpg", "stock": 5 }, { "goodsId": 53326, "name": "锦缎祈福挂饰*黄", "price": 3500.0, "disprice": 3500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/75c9c4d7-70a2-4c00-8458-5fe605f37a1b.jpg", "stock": 5 }, { "goodsId": 53327, "name": "锦缎祈福挂饰*蓝", "price": 3500.0, "disprice": 3500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/0dc1ef17-9042-4028-bc72-7394948d7128.jpg", "stock": 5 }, { "goodsId": 68210, "name": "迷你祈福挂饰*红", "price": 2500.0, "disprice": 2500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/d87e271b-a940-4a2a-8623-552d1e12ac34.jpg", "stock": 10 }, { "goodsId": 68213, "name": "迷你祈福挂饰*藏青", "price": 2500.0, "disprice": 2500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/9c62c638-adc4-4212-8799-02fcfbfbbdd3.jpg", "stock": 10 }, { "goodsId": 68220, "name": "佛系织绣挂饰*棕", "price": 2500.0, "disprice": 2500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/c39f2a1a-db63-40a0-a7a1-c6e75d537aa0.jpg", "stock": 10 }, { "goodsId": 69404, "name": "荷语手链", "price": 4500.0, "disprice": 4500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/fc93d7aa-ea81-421e-97ae-5ddd3164cc53.jpg", "stock": 5 }, { "goodsId": 137032, "name": "素色折扇*蓝", "price": 3900.0, "disprice": 3900.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/bad25b26-0735-4268-9a52-03bbff702c20.jpg", "stock": 5 }, { "goodsId": 158931, "name": "素色折扇*粉红", "price": 3900.0, "disprice": 3900.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/3c4394f6-0741-4345-8888-92adf0ad1783.jpg", "stock": 5 }, { "goodsId": 241512, "name": "流苏包挂·旗袍*粉色", "price": 3500.0, "disprice": 3500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/d7b7e78d-15b7-48b7-baf0-0be7d2ded7b9.jpg", "stock": 10 }, { "goodsId": 241515, "name": "流苏包挂·旗袍*黑色", "price": 3500.0, "disprice": 3500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/a8c1d028-fdaf-48e7-8019-21cfcea0f8c8.jpg", "stock": 10 }, { "goodsId": 241526, "name": "荷语项链", "price": 4500.0, "disprice": 4500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-06-04/8a31b183-a08e-4082-83a6-6af6e498015a.jpg", "stock": 4 }, { "goodsId": 464334, "name": "小沙弥组合摆件*不想不看", "price": 3500.0, "disprice": 3500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-07-18/3f243885-d371-4096-9c96-1a2be791f514.jpg", "stock": 4 }, { "goodsId": 464335, "name": "小沙弥组合摆件*不听不说", "price": 3500.0, "disprice": 3500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-07-18/46f0fe67-390c-4cd2-b142-afd2afa44716.jpg", "stock": 4 }, { "goodsId": 717721, "name": "般若心经挂饰", "price": 3500.0, "disprice": 3500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-08-22/7a4d8d65-68a4-46d6-a8c8-8ca41b853436.jpg", "stock": 10 }, { "goodsId": 717722, "name": "济世观音挂饰", "price": 3500.0, "disprice": 3500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-08-22/068faf29-62e0-48c0-84ce-5aaa9212c006.jpg", "stock": 10 }, { "goodsId": 717723, "name": "悟禅沙弥挂饰", "price": 3500.0, "disprice": 3500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-08-22/0b08e1d6-0799-480b-ab66-d02e97557b27.jpg", "stock": 10 }, { "goodsId": 741093, "name": "彩砂钥匙扣-天台山", "price": 1800.0, "disprice": 1800.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-09-20/20519652-c074-4f44-9f26-03d3db3f0fb6.jpg", "stock": 20 }, { "goodsId": 741094, "name": "水晶磁贴-天台山", "price": 4500.0, "disprice": 4500.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-09-20/45e36757-e022-43a4-bc06-a34955aa73f2.jpg", "stock": 10 }, { "goodsId": 741095, "name": "风景方镜-天台山*赤城栖霞", "price": 1000.0, "disprice": 1000.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-09-20/2e85dda2-a8ef-4f20-9aea-e32f41ef0817.jpg", "stock": 20 }, { "goodsId": 741096, "name": "风景方镜-天台山*国清寺", "price": 1000.0, "disprice": 1000.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-09-20/8b7a9412-69de-4d48-a8e1-304a8080ab14.jpg", "stock": 20 }, { "goodsId": 741097, "name": "风景方镜-天台山*华顶归云", "price": 1000.0, "disprice": 1000.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-09-20/75811323-9d4a-4474-a88a-8ffffd9eb55d.jpg", "stock": 20 }, { "goodsId": 741098, "name": "风景方镜-天台山*石梁飞瀑", "price": 1000.0, "disprice": 1000.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-09-20/5351a4e3-da16-4497-aed8-e4479f2019bc.jpg", "stock": 20 }, { "goodsId": 741099, "name": "马口铁磁贴-天台山*赤城栖霞", "price": 1000.0, "disprice": 1000.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-09-20/7c3fa185-8078-4d48-b679-3cb4509718ef.jpg", "stock": 20 }, { "goodsId": 741100, "name": "马口铁磁贴-天台山*国清寺", "price": 1000.0, "disprice": 1000.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-09-20/7b0f101a-5107-4e64-9901-6f525b0ab3ec.jpg", "stock": 20 }, { "goodsId": 741101, "name": "马口铁磁贴-天台山*华顶归云", "price": 1000.0, "disprice": 1000.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-09-20/1bc75396-b41e-48ea-80ec-ab56c53c7337.jpg", "stock": 19 }, { "goodsId": 741102, "name": "马口铁磁贴-天台山*云顶杜鹃", "price": 1000.0, "disprice": 1000.0, "goodsPic": "http://tcmclient.img-cn-hangzhou.aliyuncs.com/product/goods/2018-09-20/f29b22d2-8991-471e-b337-c9fb6e55098d.jpg", "stock": 20 }], "startTime": 1543562162666, "timeConsum": 605 }
                // self.productInfo = mock.data;
                // var pageTotal = Math.ceil(mock.data.length / 16);
                // self.pageTotal = pageTotal;
                // initPage(pageTotal);
                // productInit();
                $.ajax({
                    url: sale_api,
                    dataType: "jsonp",
                    data: {
                        method: "getGoodsInfo"
                    },
                    success: function (res) {
                        console.log(res);
                        if (res.success) {
                            var productInfo = res.data;
                            self.productInfo = productInfo;
                            var pageTotal = Math.ceil(res.data.length / 16);
                            self.pageTotal = pageTotal;
                            initPage(pageTotal);
                            productInit();
                        }
                    }
                })
            }

            $('.hd-left-btn img').on("touchstart", function (e) {
                // 判断默认行为是否可以被禁用
                if (e.cancelable) {
                    // 判断默认行为是否已经被禁用
                    if (!e.defaultPrevented) {
                        e.preventDefault();
                    }
                }
                $(this).addClass('scaleSmallBig')
            })
            $('.hd-left-btn img').on("touchend", function (e) {
                // 判断默认行为是否可以被禁用
                if (e.cancelable) {
                    // 判断默认行为是否已经被禁用
                    if (!e.defaultPrevented) {
                        e.preventDefault();
                    }
                }
                BoundObject.CloseFlag('1');
                $(this).removeClass('scaleSmallBig');

            })
            function changePage() {
                $('.pages span').each(function (index, item) {
                    if (pageIndex == index) {
                        $(this).addClass("active");
                    } else {
                        $(this).removeClass("active");
                    }
                })
            }
            $('.next img').on("touchstart", function (e) {
                if (pageIndex >= self.pageTotal - 1) return;
                $(this).addClass("scaleSmallBig");
                changePage();
            })
            $('.next img').on("touchend", function (e) {
                $(this).removeClass("scaleSmallBig");
                if (pageIndex == self.pageTotal - 2) {
                    $(this).attr('src', nextImgF);
                } else if (pageIndex >= self.pageTotal - 1) {
                    return false;
                } else {
                    $(this).attr('src', nextImgT);
                    $('.previous img').attr('src', previousImgT)
                }
                ++pageIndex;
                changePage();
                productInit();
            })
            $('.previous img').on("touchstart", function (e) {
                if (pageIndex == 0) return;
                $(this).addClass("scaleSmallBig");
                changePage();
            })
            $('.previous img').on("touchend", function (e) {
                if (pageIndex == 1) {
                    $(this).attr('src', previousImgF);
                } else if (pageIndex == 0) {
                    return;
                } else {
                    $(this).attr('src', previousImgT);
                    $('.next img').attr('src', nextImgT);
                }
                $(this).removeClass("scaleSmallBig");
                --pageIndex;
                changePage();
                productInit();
            })

            $('.mask-bottom img').on("touchstart", function (e) {
                $(this).addClass('scaleSmallBig');
            })
            $('.mask-bottom img').on("touchend", function (e) {
                $(this).removeClass('scaleSmallBig');
                if (e.cancelable) {
                    // 判断默认行为是否已经被禁用
                    if (!e.defaultPrevented) {
                        e.preventDefault();
                    }
                }
                cancelSelectGoods();
            })

        })()


    </script>
    <script src="http://s.yuantutech.com/yuantu/spm/1.0.12/??spm.js,track.js,view.js" async=""></script>
</body>
</html>